<template>
    <div>

        <!-- <div class="industry">客户行业类型统计：</div> -->

        <div class="countHeader">
                <div class="child_count" style="cursor: pointer;" @click="tabform(attorneyStatistical)">
                    <div class="count_num">{{attorneyStatistical[0].number}}</div>
                    <p class="count_title">{{attorneyStatistical[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(counselorStatistical)">
                    <div class="count_num">{{counselorStatistical[0].number}}</div>
                    <p class="count_title">{{counselorStatistical[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(partnerStatistical)">
                    <div class="count_num">{{partnerStatistical[0].number}}</div>
                    <p class="count_title">{{partnerStatistical[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(administrativeStatistical)">
                    <div class="count_num">{{administrativeStatistical[0].number}}</div>
                    <p class="count_title">{{administrativeStatistical[0].name}}</p>
                </div>
        </div>

        <div class="countHeader">
                <div class="child_count" style="cursor: pointer;" @click="tabform(parttimeStatistical)">
                    <div class="count_num">{{parttimeStatistical[0].number}}</div>
                    <p class="count_title">{{parttimeStatistical[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(internStatistical)">
                    <div class="count_num">{{internStatistical[0].number}}</div>
                    <p class="count_title">{{internStatistical[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(financeClient)">
                    <div class="count_num">{{financeClient[0].number}}</div>
                    <p class="count_title">{{financeClient[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(propertyClient)">
                    <div class="count_num">{{propertyClient[0].number}}</div>
                    <p class="count_title">{{propertyClient[0].name}}</p>
                </div>
        </div>

        <div class="countHeader">
                <div class="child_count" style="cursor: pointer;" @click="tabform(buildingClient)">
                    <div class="count_num">{{buildingClient[0].number}}</div>
                    <p class="count_title">{{buildingClient[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(governmentClient)">
                    <div class="count_num">{{governmentClient[0].number}}</div>
                    <p class="count_title">{{governmentClient[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(foreignClient)">
                    <div class="count_num">{{foreignClient[0].number}}</div>
                    <p class="count_title">{{foreignClient[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(emphasisChiefclient)">
                    <div class="count_num">{{emphasisChiefclient[0].number}}</div>
                    <p class="count_title">{{emphasisChiefclient[0].name}}</p>
                </div>
        </div>

        <div class="countHeader">
                <div class="child_count" style="cursor: pointer;" @click="tabform(emphasisPrivateclient)">
                    <div class="count_num">{{emphasisPrivateclient[0].number}}</div>
                    <p class="count_title">{{emphasisPrivateclient[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(clientCounseloractive)">
                    <div class="count_num">{{clientCounseloractive[0].number}}</div>
                    <p class="count_title">{{clientCounseloractive[0].name}}</p>
                </div>
                <div class="child_count" style="cursor: pointer;" @click="tabform(clientCounselor)">
                    <div class="count_num">{{clientCounselor[0].number}}</div>
                    <p class="count_title">{{clientCounselor[0].name}}</p>
                </div>
                <div class="child_count">
                    <div class="count_num">{{clientSum[0].number}}</div>
                    <p class="count_title">{{clientSum[0].name}}</p>
                </div>
        </div>


       

        <div style="width:100%;margin-top:30px;">
          <el-table :data="tableData" height="250" border style="width: 100%">
            <el-table-column
              prop="content"
              :label="title"
              
              >
            </el-table-column>
          </el-table>
        </div>

      
        <div class="lvsuo_anjiang">
            <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart2"></div>
        </div>

        <div class="lvsuo_anjiang">
            <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart3"></div>
        </div>

        <div class="lvsuo_anjiang">
            <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart4"></div>
        </div>


       
    </div>
</template>
<script>
import echarts from 'echarts'
export default {
    props: {
      className: {
        type: String,
        default: 'echartDiv'
      },
      id: {
        type: String,
        default: 'yourID'
      },
      width: {
        type: String,
        default: '850px'
      },
      height: {
        type: String,
        default: '500px'
      }
    },
    data(){
        return{

          /*--------------  律师统计 ----------------*/
          attorneyStatistical: [],
          counselorStatistical: [],
          partnerStatistical:[],
          administrativeStatistical: [],

          parttimeStatistical:[],
          internStatistical:[],

          twoMenu:[],


          /*--------------  客户行业统计 ----------------*/
          internetClient:[],
          financeClient:[],
          propertyClient:[],
          buildingClient:[],

          /*--------------  客户类型统计 ----------------*/
          governmentClient:[],
          foreignClient:[],
          emphasisChiefclient:[],
          emphasisPrivateclient:[],
          
          /*--------------  客户统计 ----------------*/
          clientSum:[],
          clientCounseloractive:[],
          clientCounselor:[],

          /*--------------  案件统计 ----------------*/
          // lawyerClosen:[],
          // yearnewlawyerClosen:[],
          // yearnewlawyerAccreditation:[],
          // lawyerAccreditation:[],

          /*--------------  表单数据 ----------------*/
          title:"",
          tableData: [],

          /*--------------  饼图 ----------------*/
          chart2: null,
          bingArr:[],
          bingArr1:[],
          bingArr2:[],
          bingArr3:[],

          chart3: null,
          Arr:[],
          Arr1:[],
          Arr2:[],
          Arr3:[],

          chart4: null,
          fourArr:[],
          fourArr1:[],
          fourArr2:[],
          fourArr3:[]
            
        }
    },
    created(){
      this.getInfo()
      
    },
    mounted(){
      this.getExportButton()
      setTimeout(() =>{
         this.initChart2();
      },6000);
      setTimeout(() =>{
         this.initChart3();
      },6000);
      setTimeout(() =>{
         this.initChart4();
      },6000);
      
    },
    beforeDestroy() {
         
    },
    methods:{
      /**
       * 获取二级按钮
       */
      getExportButton(){
         this.$http.get('/yongxu/Base/User_Two_Menu',{params:{
          Menu_Id:6,
          User_Id:localStorage.getItem('userId')
        }}).then((res)=>{
          this.twoMenu = res.data
          console.log(res)
        })
      },


      /**
       * 点击切换表单
       */
      tabform(content){
          this.title = content[0].name
          this.tableData = []
          for (let i = 0; i < content[0].content.length; i++) {
            this.tableData.push({
              content:content[0].content[i]
            })
          }
      },

      /**
       * 获取统计信息
       */
       getInfo(){

          //律师统计
          this.$http.get('/yongxu/Statistics/attorneyStatistical',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.title = "律师"
                  for (let i = 0; i < res.data.attorneyStatisticalname.length; i++) {
                    this.tableData.push({
                      content:res.data.attorneyStatisticalname[i]
                    })
                  }
                  this.attorneyStatistical.push(
                    {
                      number:res.data.attorneyStatisticalnumber,
                      name:"律师",
                      content:res.data.attorneyStatisticalname
                    }
                  )

                  this.counselorStatistical.push(
                    {
                      number:res.data.counselorStatisticalnumber,
                      name:"顾问",
                      content:res.data.counselorStatisticalname
                    }
                  )
                  this.partnerStatistical.push(
                    {
                      number:res.data.partnerStatisticalnumber,
                      name:"合伙人 ",
                      content:res.data.partnerStatisticalname
                    }
                  )
                  this.administrativeStatistical.push(
                    {
                      number:res.data.administrativeStatisticalnumber,
                      name:"行政人员",
                      content:res.data.administrativeStatisticalname
                    }
                  )
                  this.parttimeStatistical.push(
                    {
                      number:res.data.parttimeStatisticalnumber,
                      name:"兼职律师",
                      content:res.data.parttimeStatisticalname
                    }
                  )
                  this.internStatistical.push(
                    {
                      number:res.data.internStatisticalnumber,
                      name:"实习律师",
                      content:res.data.internStatisticalname
                    }
                  )
          })
          //客户行业统计
          this.$http.get('/yongxu/Statistics/clientIndustrytype',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.internetClient.push(
                    {
                      number:res.data.internetClientnumber,
                      name:"互联网行业的客户",
                      content:res.data.internetClientname
                    }
                  )
                  this.financeClient.push(
                    {
                      number:res.data.financeClientnumber,
                      name:"金融业客户数量",
                      content:res.data.financeClientname
                    }
                  )
                  this.propertyClient.push(
                    {
                      number:res.data.propertyClientnumber,
                      name:"房地产客户数量",
                      content:res.data.propertyClientname
                    }
                  )
                  this.buildingClient.push(
                    {
                      number:res.data.buildingClientnumber,
                      name:"建筑业客户数量",
                      content:res.data.buildingClientname
                    }
                  )
          })

          //客户类型统计
          this.$http.get('/yongxu/Statistics/clientTypestatistics',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.governmentClient.push(
                    {
                      number:res.data.governmentClient,
                      name:"政府客户数量",
                      content:res.data.governmentClientname
                    }
                  )
                  this.foreignClient.push(
                    {
                      number:res.data.foreignClient,
                      name:"外国客户数量",
                      content:res.data.foreignClientname
                    }
                  )
                  this.emphasisChiefclient.push(
                    {
                      number:res.data.emphasisChiefclientnumber,
                      name:"重点国企数量",
                      content:res.data.emphasisChiefclientname
                    }
                  )
                  this.emphasisPrivateclient.push(
                    {
                      number:res.data.emphasisPrivateclientnumber,
                      name:"重点民营数量",
                      content:res.data.emphasisPrivateclientname
                    }
                  )
          })

          //客户统计
          this.$http.get('/yongxu/Statistics/clientStatistics',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
                  // this.realestateNumber = res.data.realestateNumber
                  this.clientSum.push(
                    {
                      number:res.data.clientSum,
                      name:"客户累计总数",
                    }
                  )
                  this.clientCounseloractive.push(
                    {
                      number:res.data.clientCounseloractive,
                      name:"活跃的常年顾问的客户",
                      content:res.data.clientCounseloractivename
                    }
                  )
                  this.clientCounselor.push(
                    {
                      number:res.data.clientCounselor,
                      name:"常年顾问的案件的数量",
                      content:res.data.clientCounselorname
                    }
                  )
                 
          })

          //案件统计
          // this.$http.get('/yongxu/Statistics/lawyerCaseStatistical',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
          //         // this.realestateNumber = res.data.realestateNumber
          //         this.lawyerClosen.push(
          //           {
          //             number:res.data.lawyerClosennumber,
          //             name:"已经结案的全部案件数量",
          //           }
          //         )
          //         this.yearnewlawyerClosen.push(
          //           {
          //             number:res.data.yearnewlawyerClosennumber,
          //             name:"已经结案的年度新增案件数量",
          //           }
          //         )
          //         this.yearnewlawyerAccreditation.push(
          //           {
          //             number:res.data.yearnewlawyerAccreditationnumber,
          //             name:"已经立案的年度新增案件数量",
          //           }
          //         )
          //         this.lawyerAccreditation.push(
          //           {
          //             number:res.data.lawyerAccreditationnumber,
          //             name:"已经立案的全部案件全部数量",
          //           }
          //         )
                 
          // })
      },

      initChart2(){
      this.$http.get('/yongxu/Statistics/caseStatistics',{params:{User_Id:localStorage.getItem('userId')}}).then((res)=>{
            var _self =this
                // console.log(this.MinTime2)
                //  console.log(this.MaxTime2)
                var bingArr = res.data
                // console.log(res)
                 _self.bingArr = []
                for(var i = 0;i<bingArr.length;i++){
                    _self.bingArr1[i] = bingArr[i].name
                    _self.bingArr3[i] = bingArr[i].value
                    _self.bingArr.push({name:bingArr[i].name,value:bingArr[i].value})
                 }
      }).then(()=>{
          this.chart2 = echarts.init(this.$refs.myEchart2);
          this.chart2.setOption({
          title : {
              text: '案件状态统计',
              subtext: '数量',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient : 'vertical',
              x : 'left',
              data:this.bingArr1,
              type: 'scroll',
          },
          toolbox: {
              show : true,
              feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType : {
                      show: true, 
                      type: ['pie', 'funnel'],
                      option: {
                          funnel: {
                              x: '25%',
                              width: '50%',
                              funnelAlign: 'left',
                              max: 1548
                          }
                      }
                  },
                  restore : {show: true},
                  saveAsImage : {show: true}
              }
          },
          calculable : true,
          series : [
              {
                  name:'系统统计',
                  type:'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:this.bingArr
              }
          ]
        })
                                       
      })
    },
    initChart3(){
      this.$http.get('/yongxu/Statistics/caseTypeStatistics',{params:{date:"2020"}}).then((res)=>{
            var _self =this
                // console.log(this.MinTime2)
                //  console.log(this.MaxTime2)
                var Arr = res.data
                // console.log(res)
                 _self.Arr = []
                for(var i = 0;i<Arr.length;i++){
                    _self.Arr1[i] = Arr[i].name
                    _self.Arr3[i] = Arr[i].value
                    _self.Arr.push({name:Arr[i].name,value:Arr[i].value})
                 }
      }).then(()=>{
          this.chart3 = echarts.init(this.$refs.myEchart3);
          this.chart3.setOption({
          title : {
              text: '案件类型统计',
              subtext: '数量',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient : 'vertical',
              x : 'left',
              data:this.Arr1,
              type: 'scroll',
          },
          toolbox: {
              show : true,
              feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType : {
                      show: true, 
                      type: ['pie', 'funnel'],
                      option: {
                          funnel: {
                              x: '25%',
                              width: '50%',
                              funnelAlign: 'left',
                              max: 1548
                          }
                      }
                  },
                  restore : {show: true},
                  saveAsImage : {show: true}
              }
          },
          calculable : true,
          series : [
              {
                  name:'系统统计',
                  type:'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:this.Arr
              }
          ]
        })
                                       
      })
    },

    initChart4(){
      this.$http.get('/yongxu/Statistics/caseLegaStatistics',{params:{date:"2020"}}).then((res)=>{
            var _self =this
                // console.log(this.MinTime2)
                //  console.log(this.MaxTime2)
                var fourArr = res.data
                // console.log(res)
                 _self.fourArr = []
                for(var i = 0;i<fourArr.length;i++){
                    _self.fourArr1[i] = fourArr[i].name
                    _self.fourArr3[i] = fourArr[i].value
                    _self.fourArr.push({name:fourArr[i].name,value:fourArr[i].value})
                 }
      }).then(()=>{
          this.chart4 = echarts.init(this.$refs.myEchart4);
          this.chart4.setOption({
          title : {
              text: '案件种类统计',
              subtext: '数量',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient : 'vertical',
              x : 'left',
              data:this.fourArr1,
              type: 'scroll',
          },
          toolbox: {
              show : true,
              feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType : {
                      show: true, 
                      type: ['pie', 'funnel'],
                      option: {
                          funnel: {
                              x: '25%',
                              width: '50%',
                              funnelAlign: 'left',
                              max: 1548
                          }
                      }
                  },
                  restore : {show: true},
                  saveAsImage : {show: true}
              }
          },
          calculable : true,
          series : [
              {
                  name:'系统统计',
                  type:'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:this.fourArr
              }
          ]
        })
                                       
      })
    },

    

    } 
}
</script>
<style>
.countHeader{
    display: flex;
    flex-direction: row;
    height: 80px;
    justify-content: space-between;
   
}
.child_count{
     margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-items: center;
    justify-content: center;
    align-items: center;
    border-left: 2px solid #999999;
    flex: 1;
    font-size: 18px;
}
.child_count:first-child{
     border-left: none;
}
.count_num{
   font-weight: 600;
}
.count_title{
    margin-top: 10px;
}
/*  */
.countCase{
    margin-top: 30px;
}
.countCase_title{
    margin-left: 30px;
}
.echartDiv{
    margin: 0 auto;
}
.row_center{
    /* justify-content: center; */
    align-items: center;
}
.dingzhi{
    width:75px;
    height:30px;
    background:rgba(255,255,255,1);
    border:2px solid rgba(126,44,46,1);
    cursor: pointer;
    font-weight: 600;
    color: #7E2C2E;
    outline: none;
}
.industry{
  margin-bottom:10px;
  
}
.lvsuo_anjiang{
  margin-top:30px;
}
</style>


